<template>
  <div class="knowledge-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <h1 class="page-title">知识中心</h1>
        <p class="page-subtitle">提升反诈意识，掌握防护技能</p>
      </div>
    </section>

    <!-- 搜索区域 -->
    <section class="search-section">
      <div class="container">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索知识内容、案例、技巧..."
            class="search-input"
            @keyup.enter="searchContent"
          >
          <button @click="searchContent" class="search-btn">
            <span class="search-icon">🔍</span>
          </button>
        </div>
      </div>
    </section>

    <!-- 知识分类导航 -->
    <section class="category-section">
      <div class="container">
        <div class="category-tabs">
          <button 
            v-for="category in categories" 
            :key="category.id"
            @click="activeCategory = category.id"
            :class="['category-tab', { active: activeCategory === category.id }]"
          >
            <span class="category-icon">{{ category.icon }}</span>
            <span class="category-name">{{ category.name }}</span>
          </button>
        </div>
      </div>
    </section>

    <!-- 知识内容区域 -->
    <section class="content-section">
      <div class="container">
        <div class="content-grid">
          <!-- 主要内容 -->
          <div class="main-content">
            <!-- 反诈知识 -->
            <div v-if="activeCategory === 'anti-fraud'" class="knowledge-section">
              <h2 class="section-title">反诈知识</h2>
              <div class="knowledge-grid">
                <div class="knowledge-card" v-for="item in antifraudKnowledge" :key="item.id">
                  <div class="card-header">
                    <span class="card-category">{{ item.category }}</span>
                    <span class="card-date">{{ formatDate(item.date) }}</span>
                  </div>
                  <h3 class="card-title">{{ item.title }}</h3>
                  <p class="card-excerpt">{{ item.excerpt }}</p>
                  <div class="card-tags">
                    <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
                  </div>
                  <div class="card-footer">
                    <button @click="showDetail(item)" class="read-more-btn">阅读更多</button>
                    <span class="read-count">{{ item.readCount }} 人阅读</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 案例分析 -->
            <div v-if="activeCategory === 'cases'" class="knowledge-section">
              <h2 class="section-title">案例分析</h2>
              <div class="case-list">
                <div class="case-item" v-for="case_item in cases" :key="case_item.id">
                  <div class="case-header">
                    <div class="case-info">
                      <h3 class="case-title">{{ case_item.title }}</h3>
                      <div class="case-meta">
                        <span class="case-type">{{ case_item.type }}</span>
                        <span class="case-date">{{ formatDate(case_item.date) }}</span>
                        <span class="case-amount">涉案金额：{{ case_item.amount }}</span>
                      </div>
                    </div>
                    <div class="case-risk-level" :class="case_item.riskLevel">
                      {{ getRiskLevelText(case_item.riskLevel) }}
                    </div>
                  </div>
                  <div class="case-content">
                    <div class="case-description">
                      <h4>案例描述</h4>
                      <p>{{ case_item.description }}</p>
                    </div>
                    <div class="case-analysis">
                      <h4>分析要点</h4>
                      <ul>
                        <li v-for="point in case_item.analysisPoints" :key="point">{{ point }}</li>
                      </ul>
                    </div>
                    <div class="case-prevention">
                      <h4>防范建议</h4>
                      <p>{{ case_item.prevention }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 防护技巧 -->
            <div v-if="activeCategory === 'tips'" class="knowledge-section">
              <h2 class="section-title">防护技巧</h2>
              <div class="tips-grid">
                <div class="tip-card" v-for="tip in tips" :key="tip.id">
                  <div class="tip-icon">{{ tip.icon }}</div>
                  <h3 class="tip-title">{{ tip.title }}</h3>
                  <p class="tip-content">{{ tip.content }}</p>
                  <div class="tip-steps">
                    <h4>具体步骤</h4>
                    <ol>
                      <li v-for="step in tip.steps" :key="step">{{ step }}</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>

            <!-- 常见问题 -->
            <div v-if="activeCategory === 'faq'" class="knowledge-section">
              <h2 class="section-title">常见问题</h2>
              <div class="faq-list">
                <div class="faq-item" v-for="faq in faqs" :key="faq.id">
                  <div class="faq-question" @click="toggleFAQ(faq.id)">
                    <h3>{{ faq.question }}</h3>
                    <span class="faq-toggle" :class="{ active: faq.expanded }">
                      {{ faq.expanded ? '−' : '+' }}
                    </span>
                  </div>
                  <div class="faq-answer" v-show="faq.expanded">
                    <p>{{ faq.answer }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 侧边栏 -->
          <div class="sidebar">
            <!-- 热门话题 -->
            <div class="sidebar-widget">
              <h3 class="widget-title">热门话题</h3>
              <div class="hot-topics">
                <div class="topic-item" v-for="topic in hotTopics" :key="topic.id">
                  <span class="topic-rank">{{ topic.rank }}</span>
                  <span class="topic-name">{{ topic.name }}</span>
                  <span class="topic-count">{{ topic.count }}</span>
                </div>
              </div>
            </div>

            <!-- 最新动态 -->
            <div class="sidebar-widget">
              <h3 class="widget-title">最新动态</h3>
              <div class="latest-news">
                <div class="news-item" v-for="news in latestNews" :key="news.id">
                  <div class="news-date">{{ formatDate(news.date) }}</div>
                  <h4 class="news-title">{{ news.title }}</h4>
                  <p class="news-summary">{{ news.summary }}</p>
                </div>
              </div>
            </div>

            <!-- 统计数据 -->
            <div class="sidebar-widget">
              <h3 class="widget-title">统计数据</h3>
              <div class="stats-widget">
                <div class="stat-item" v-for="stat in stats" :key="stat.id">
                  <div class="stat-value">{{ stat.value }}</div>
                  <div class="stat-label">{{ stat.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 知识详情弹窗 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetail">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2 class="modal-title">{{ selectedItem.title }}</h2>
          <button @click="closeDetail" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <div class="detail-meta">
            <span class="detail-category">{{ selectedItem.category }}</span>
            <span class="detail-date">{{ formatDate(selectedItem.date) }}</span>
          </div>
          <div class="detail-content">
            <p>{{ selectedItem.content }}</p>
          </div>
          <div class="detail-tags">
            <span v-for="tag in selectedItem.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicKnowledge',
  data() {
    return {
      searchQuery: '',
      activeCategory: 'anti-fraud',
      showDetailModal: false,
      selectedItem: null,
      
      categories: [
        { id: 'anti-fraud', name: '反诈知识', icon: '🛡️' },
        { id: 'cases', name: '案例分析', icon: '📖' },
        { id: 'tips', name: '防护技巧', icon: '💡' },
        { id: 'faq', name: '常见问题', icon: '❓' }
      ],
      
      antifraudKnowledge: [
        {
          id: 1,
          title: '电信诈骗的常见手段及预防',
          category: '电信诈骗',
          excerpt: '了解电信诈骗的各种手段，包括冒充公检法、虚假客服、钓鱼网站等，掌握有效的预防方法...',
          content: '电信诈骗是指犯罪分子通过电话、网络和短信方式，编造虚假信息，设置骗局，对受害人实施远程、非接触式诈骗，诱使受害人给犯罪分子打款或转账的犯罪行为。常见手段包括：1. 冒充公检法机关工作人员；2. 虚假客服退款诈骗；3. 网络钓鱼诈骗；4. 刷单返利诈骗...',
          tags: ['电信诈骗', '预防', '识别'],
          date: new Date('2024-01-15'),
          readCount: 1250
        },
        {
          id: 2,
          title: '网络购物诈骗的识别与防范',
          category: '网络诈骗',
          excerpt: '网络购物诈骗层出不穷，学会识别虚假网站、假冒客服、退款诈骗等常见套路...',
          content: '网络购物诈骗是指犯罪分子利用虚假购物网站、冒充客服人员或以退款为由实施的诈骗行为。防范要点：1. 选择正规购物平台；2. 核实客服身份；3. 不轻信退款信息；4. 保护个人信息...',
          tags: ['网络购物', '诈骗识别', '安全防范'],
          date: new Date('2024-01-10'),
          readCount: 980
        },
        {
          id: 3,
          title: '投资理财诈骗警示',
          category: '投资诈骗',
          excerpt: '高收益往往伴随高风险，了解投资理财诈骗的常见套路，避免落入投资陷阱...',
          content: '投资理财诈骗通常以高收益、低风险为诱饵，通过虚假投资平台、推荐股票、数字货币等方式实施诈骗。识别要点：1. 理性看待高收益承诺；2. 核实投资平台资质；3. 不盲目跟风投资；4. 谨慎对待投资建议...',
          tags: ['投资理财', '诈骗预警', '风险识别'],
          date: new Date('2024-01-05'),
          readCount: 1450
        }
      ],
      
      cases: [
        {
          id: 1,
          title: '虚假贷款APP诈骗案例',
          type: '网络诈骗',
          amount: '15万元',
          riskLevel: 'high',
          description: '受害人通过网络广告下载虚假贷款APP，按照要求填写个人信息并支付各种费用，最终被骗15万元。',
          analysisPoints: [
            '犯罪分子利用受害人急需资金的心理',
            '虚假APP界面精美，具有迷惑性',
            '以各种理由要求受害人支付费用',
            '一旦得手立即失联'
          ],
          prevention: '选择正规金融机构办理贷款，不要轻信网络广告，正规贷款不会要求提前支付费用。',
          date: new Date('2024-01-12')
        },
        {
          id: 2,
          title: '冒充客服退款诈骗案例',
          type: '电信诈骗',
          amount: '8万元',
          riskLevel: 'medium',
          description: '犯罪分子冒充电商客服，以订单异常需要退款为由，诱导受害人扫描二维码并输入验证码，盗取资金。',
          analysisPoints: [
            '准确掌握受害人购物信息',
            '冒充官方客服身份',
            '利用扫码支付实施诈骗',
            '诱导受害人输入验证码'
          ],
          prevention: '接到退款电话时，应通过官方渠道核实信息，不要轻易扫描陌生二维码或输入验证码。',
          date: new Date('2024-01-08')
        }
      ],
      
      tips: [
        {
          id: 1,
          title: '如何识别虚假网站',
          icon: '🌐',
          content: '学会识别虚假网站的特征，保护个人信息安全。',
          steps: [
            '检查网站地址是否正确，注意拼写错误',
            '查看网站安全证书，确认https加密',
            '核实网站备案信息',
            '注意页面设计是否专业',
            '通过官方渠道验证网站真实性'
          ]
        },
        {
          id: 2,
          title: '手机支付安全设置',
          icon: '📱',
          content: '正确设置手机支付安全功能，降低资金风险。',
          steps: [
            '设置复杂的支付密码',
            '开启指纹或面部识别',
            '设置合理的支付限额',
            '定期检查账户明细',
            '及时更新支付软件版本'
          ]
        },
        {
          id: 3,
          title: '个人信息保护',
          icon: '🔒',
          content: '保护个人信息，防止信息泄露被恶意利用。',
          steps: [
            '不随意透露身份证号、银行卡号等',
            '谨慎填写网络表单',
            '定期更换密码',
            '不在公共场所进行敏感操作',
            '及时销毁包含个人信息的文件'
          ]
        }
      ],
      
      faqs: [
        {
          id: 1,
          question: '如何判断电话是否为诈骗电话？',
          answer: '诈骗电话通常具有以下特征：1. 声称是公检法机关要求配合调查；2. 以各种理由要求转账汇款；3. 声称中奖或有优惠活动；4. 催促立即行动，不给思考时间。遇到可疑电话应挂断并通过官方渠道核实。',
          expanded: false
        },
        {
          id: 2,
          question: '收到可疑短信链接该如何处理？',
          answer: '不要点击可疑短信中的链接，特别是声称中奖、优惠或要求验证账户的短信。如果确实需要核实信息，应通过官方客服热线或官方网站进行确认。',
          expanded: false
        },
        {
          id: 3,
          question: '发现被骗后应该怎么办？',
          answer: '立即采取以下措施：1. 停止与诈骗分子的一切联系；2. 立即报警并保留相关证据；3. 联系银行冻结相关账户；4. 及时修改相关密码；5. 配合警方调查。',
          expanded: false
        }
      ],
      
      hotTopics: [
        { id: 1, rank: 1, name: '电信诈骗', count: '1.2万' },
        { id: 2, rank: 2, name: '网络购物诈骗', count: '8.5千' },
        { id: 3, rank: 3, name: '投资理财诈骗', count: '6.8千' },
        { id: 4, rank: 4, name: '虚假贷款', count: '5.2千' },
        { id: 5, rank: 5, name: '冒充客服', count: '4.1千' }
      ],
      
      latestNews: [
        {
          id: 1,
          title: '公安部发布最新反诈预警',
          summary: '针对近期多发的网络诈骗案件，公安部发布最新预警信息...',
          date: new Date('2024-01-15')
        },
        {
          id: 2,
          title: '新型AI诈骗手段曝光',
          summary: '犯罪分子利用AI技术实施诈骗，需要提高警惕...',
          date: new Date('2024-01-12')
        },
        {
          id: 3,
          title: '反诈宣传活动启动',
          summary: '全国反诈宣传活动正式启动，提升全民反诈意识...',
          date: new Date('2024-01-10')
        }
      ],
      
      stats: [
        { id: 1, value: '98.5%', label: '用户满意度' },
        { id: 2, value: '15万+', label: '知识条目' },
        { id: 3, value: '500万+', label: '学习人次' },
        { id: 4, value: '24小时', label: '在线服务' }
      ]
    }
  },
  
  methods: {
    searchContent() {
      if (this.searchQuery.trim()) {
        alert(`搜索: ${this.searchQuery}`)
        // 这里可以实现实际的搜索功能
      }
    },
    
    showDetail(item) {
      this.selectedItem = item
      this.showDetailModal = true
      document.body.style.overflow = 'hidden'
    },
    
    closeDetail() {
      this.showDetailModal = false
      this.selectedItem = null
      document.body.style.overflow = 'auto'
    },
    
    toggleFAQ(id) {
      const faq = this.faqs.find(f => f.id === id)
      if (faq) {
        faq.expanded = !faq.expanded
      }
    },
    
    getRiskLevelText(level) {
      const texts = {
        high: '高风险',
        medium: '中风险',
        low: '低风险'
      }
      return texts[level] || '未知'
    },
    
    formatDate(date) {
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  }
}
</script>

<style scoped>
.knowledge-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  padding: 40px 0;
  background: white;
}

.search-box {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-input {
  flex: 1;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  outline: none;
}

.search-btn {
  padding: 15px 20px;
  background: #1e3c72;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #2a5298;
}

.search-icon {
  font-size: 18px;
}

/* 分类导航 */
.category-section {
  padding: 40px 0;
  background: white;
  border-bottom: 1px solid #e1e5e9;
}

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.category-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 30px;
  background: #f8f9fa;
  border: 2px solid #e1e5e9;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.category-tab:hover {
  border-color: #1e3c72;
  background: #ffffff;
}

.category-tab.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.category-icon {
  font-size: 24px;
}

.category-name {
  font-size: 16px;
  font-weight: 500;
}

/* 内容区域 */
.content-section {
  padding: 60px 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

.main-content {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 30px;
  text-align: center;
}

/* 知识卡片 */
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.knowledge-card {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.knowledge-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-category {
  background: #1e3c72;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.card-date {
  font-size: 12px;
  color: #666;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.card-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.card-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.read-more-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.read-more-btn:hover {
  background: #2a5298;
}

.read-count {
  font-size: 12px;
  color: #666;
}

/* 案例列表 */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-item {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  border-left: 4px solid #1e3c72;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.case-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.case-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.case-type {
  background: #e3f2fd;
  padding: 2px 8px;
  border-radius: 10px;
}

.case-risk-level {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.case-risk-level.high {
  background: #ffebee;
  color: #c62828;
}

.case-risk-level.medium {
  background: #fff3e0;
  color: #ef6c00;
}

.case-risk-level.low {
  background: #e8f5e8;
  color: #2e7d32;
}

.case-content {
  display: grid;
  gap: 20px;
}

.case-content h4 {
  font-size: 16px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.case-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.case-content ul {
  padding-left: 20px;
}

.case-content li {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

/* 防护技巧 */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.tip-card {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
}

.tip-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.tip-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 15px;
}

.tip-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.tip-steps {
  text-align: left;
}

.tip-steps h4 {
  font-size: 16px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.tip-steps ol {
  padding-left: 20px;
}

.tip-steps li {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 常见问题 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: #f8f9fa;
  border-radius: 15px;
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #e9ecef;
}

.faq-question h3 {
  font-size: 16px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0;
}

.faq-toggle {
  font-size: 24px;
  color: #1e3c72;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.faq-toggle.active {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 20px 20px;
  border-top: 1px solid #e1e5e9;
  background: white;
}

.faq-answer p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 15px 0 0 0;
}

/* 侧边栏 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-widget {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.widget-title {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 20px;
  text-align: center;
}

/* 热门话题 */
.hot-topics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.topic-item:last-child {
  border-bottom: none;
}

.topic-rank {
  width: 24px;
  height: 24px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.topic-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.topic-count {
  font-size: 12px;
  color: #666;
}

/* 最新动态 */
.latest-news {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-date {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.news-title {
  font-size: 14px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 8px;
}

.news-summary {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 统计数据 */
.stats-widget {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e1e5e9;
}

.modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 30px;
}

.detail-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.detail-category {
  background: #1e3c72;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.detail-date {
  font-size: 12px;
  color: #666;
}

.detail-content {
  margin-bottom: 20px;
}

.detail-content p {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
}

.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 32px;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .category-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .category-tab {
    min-width: 200px;
  }
  
  .knowledge-grid {
    grid-template-columns: 1fr;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
  
  .case-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .case-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .stats-widget {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
  }
  
  .modal-header {
    padding: 15px 20px;
  }
  
  .modal-body {
    padding: 20px;
  }
}
</style> 